<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../vue.js"></script>
		<!-- https://cn.vuejs.org/v2/guide/list.html -->
		<title>列表渲染</title>

	</head>
	<body>
		<div id="vm1">
			<p>{{message}}</p>

			<!-- 用 v-for 把一个数组对应为一组元素 -->
			<ul>
				<li v-for="item,index in items" :accesskey="index">
					<!-- v-bind:accesskey="index" 缩写 :accesskey="index" -->
					{{item.txt}}
				</li>
			</ul>

			<ul>
				<li v-for="item,index in items2" :accesskey="index">
					<!-- v-bind:accesskey="index" 缩写 :accesskey="index" -->
					{{item.txt}}
				</li>
			</ul>

			<!-- 在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。 -->
			<ul>
				<li v-for="(item , index) in items" v-bind:accesskey="index">
					{{message}} - {{index}} - {{item}}
				</li>
			</ul>

			<!-- 可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法： -->
			<ul>
				<li v-for="(item , index) of items">
					{{message}} - {{index}} - {{item}}
				</li>
			</ul>


			<!-- 在 v-for 里使用对象 -->
			<ul id="v-for-object" class="demo">
				<li v-for="value in object">
					{{value}}
				</li>
			</ul>

			<!-- 也可以提供第二个的参数为 property 名称 (也就是键名)： -->
			<div v-for="(value, name) in object">
				{{ name }}: {{ value }}
			</div>
			<br />
			<!-- 还可以用第三个参数作为索引： -->
			<div v-for="(value, name,index) in object">
				{{index}}. {{ name }}: {{ value }}
			</div>



			<!-- 显示过滤/排序后的结果 -->
			<ul>
				<li v-for=" n in evenNumbers">
					{{n}}
				</li>
			</ul>
			
			<!-- 
			在 <template> 上使用 v-for
			类似于 v-if，你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。比如： 
			 -->
			<ul>
				<template v-for="item in items">
					<li class="demo">{{item.txt}}</li>
				</template>
			</ul>


		</div>

		<script>
			var data = {
				message: '列表渲染',
				seen: true, // false
				url: 'https://cn.vuejs.org/v2/guide/list.html',
				isActive: true,
				isGreen: true,
				color: '#FF0000',
				size: '50px',
				type: 'C',
				isShow: true,
				items: [{
						txt: 'item1'
					},
					{
						txt: 'item2'
					},
					{
						txt: 'item3'
					},
					{
						txt: 'item4'
					},
				],
				items2: [{
						txt: 'item1'
					},
					{
						txt: 'item2'
					},
					{
						txt: 'item3'
					},
					{
						txt: 'item4'
					},
				],
				object:{
					 title: 'How to do lists in Vue',
					      author: 'Jane Doe',
					      publishedAt: '2016-04-10'
				},
				
				numbers:[1,2,3,4,5,6],
				

			}
			
	

			var vm1 = new Vue({
				el: '#vm1',
				data: data,
				methods: {
					click1: function() {
						console.log('click 2 事件')
					},
					click2: function() {
						console.log('click 2 事件')
					},
				},
				computed:{
					evenNumbers:function(){
						return this.numbers.filter(function(number){
								return number % 2 === 0
						})
					
					}
				},
			})
			
			let tempdata = [
				{txt:'push数据1'},
				{txt:'push数据2'},
				{txt:'push数据3'}
			]
			
			// 数组更新检测
			vm1.items.push({txt:'push数据1'}) 
			vm1.items.push({txt:'push数据2'})
			
			//替换数组 
			//变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。
			//它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
			vm1.items2 = vm1.items2.filter(function(item){
				return item.txt.match('item3')//返回一个item3
			})
			
			/* 
				可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。
				Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
			 */
			
		</script>
		<style type="text/css">
			.demo {
				color: #FF0000;
				font-size: 30px;
				background: #008000;
			}
		</style>
	</body>
	</body>
</html>
